<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./js/formSelects-v4.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.js"></script>
    <script src="js/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/httpRequst.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">知识库</a>

      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">


    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <fieldset class="layui-elem-field">

        <div class="layui-row" style="margin-top: 20px">
            <form class="layui-form ">
                <div class="layui-col-md6">


                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">描述文本</label>
                        <div class="layui-input-block">
                            <textarea id="deviceDiscription" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">

                        <div class="layui-input-block">
                            <button class="layui-btn" type="button" id="deviceRecognition">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>


                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">设备选择</label>
                        <div class="layui-input-block" style="margin-right:10px ">
                            <select name="city" xm-select="select15" xm-select-search="">
                                <option value="">请选择, 此处是联动多选</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" type="button" id="deviceSubmit">立即提交</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </fieldset>
    <fieldset class="layui-elem-field" style="background: #F2F2F2;height: 600px;overflow: auto">

        <div class="layui-row" id="knologyCard">

        </div>
    </fieldset>
</div>


<!--<div class="layui-col-md2" id="troubleSubmit"-->
<!--style=" height:700px;background: #fdf6e3; ">-->

<!--<form class="layui-form   layui-form-pane" style="position: relative;right: -86px">-->
<!--<div class="layui-form-item" id="x-city">-->

<!--<div class="layui-input-inline">-->
<!--<select name="province">-->
<!--<option value="">请选设备</option>-->
<!--</select>-->
<!--</div>-->
<!--<div class="layui-input-inline">-->
<!--<select name="city">-->
<!--<option value="">请选配件</option>-->
<!--</select>-->
<!--</div>-->
<!--<div class="layui-input-inline">-->
<!--<select name="area">-->
<!--<option value="">请选部位</option>-->
<!--</select>-->
<!--</div>-->
<!--<div class="layui-input-inline">-->
<!--<select name="area">-->
<!--<option value="">请选隐患</option>-->
<!--</select>-->
<!--</div>-->
<!--</div>-->
<!--</form>-->


<!--</div>-->

</div>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.js"></script>


<script src="js/formSelects-v4.js" charset="utf-8"></script>
<script src="js/httpRequst.js"></script>
<script>
    layui.use(['form', 'layer', 'table', 'element'], function () {
        form = layui.form;
        var formSelects = layui.formSelects;
        var layer = layui.layer


        $("#deviceRecognition").on('click', function (e) {
            jeecg.ajaxJsonGet("nlp/content", {content: $("#deviceDiscription").val()}, function (result) {
                showcard(result)
            })
        });

        formSelects.data('select15', 'local', {
            arr: [
                {
                    "name": "北京",
                    "value": 1,
                    "children": [
                        {
                            "name": "北京市1", "value": 12, "children": [
                                {"name": "朝阳区1", "value": 13, "children": []},
                                {"name": "朝阳区2", "value": 14, "children": []},
                                {"name": "朝阳区3", "value": 15, "children": []},
                                {"name": "朝阳区4", "value": 16, "children": []},
                            ]
                        },
                        {"name": "北京市2", "value": 17, "children": []},
                        {"name": "北京市3", "value": 18, "children": []},
                        {"name": "北京市4", "value": 19, "children": []},
                    ]
                },
                {
                    "name": "天津",
                    "value": 2,
                    "children": [
                        {"name": "天津市1", "value": 51, "children": []},
                    ]
                },
            ],
            linkage: true   //开启联动模式
        });

        function showcard(result) {
            $("#knologyCard").empty()
            for (var index in result) {
                var noimageURL = 'http://www.jpw.net/upload/picture/library/636497172326272204/j74252.gif'
                var imageurl = result[index].image === null ? noimageURL : result[index].image
                var detailText = result[index].detail === null ? '暂无详情' : result[index].detail
                var detailUrl = result[index].url === null ? '' : result[index].url
                var cardItem = "<div class=\"layui-col-md3\">\n" +
                    "                <div class=\"layui-card\" style=\"margin: 20px\">\n" +
                    "                    <div class=\"layui-card-header\">" + result[index].title + "</div>\n" +
                    "                    <div class=\"layui-card-body\">\n" +
                    " <img style='height: 160px;width: 49%;margin-bottom: 10px ' src='" + imageurl + "'>" +
                    " <img style='height: 160px;width: 49%;margin-bottom: 10px ' src='" + imageurl + "'>" +
                    "<button  url='" + detailUrl + "'   type=\"button\" style='width: 100%' class='layui-btn'  >查看详情</>"
                "                    </div>\n" +
                "                </div>\n" +
                "            </div>"
                $("#knologyCard").append(cardItem)
            }

        }

        $("#knologyCard").on("click", "button", function (evt) {
            var url = evt.target.getAttribute('url')
            console.log(url);
            if (url === '') {
                layer.msg('暂时缺失，等你加入！');
            } else {
                layer.open({
                    type: 2,
                    title: '百科详情',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['893px', '600px'],
                    content: evt.target.getAttribute('url')
                });
            }
        });
        (function drawDevice() {
            jeecg.ajaxJson('database/device/all', {}, function (result) {
                showcard(result)
            })
        })()


    });

</script>
<link rel="stylesheet" type="text/css" href="js/wheelmenu.css"/>
<script>var _hmt = _hmt || [];
(function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>

</body>

</html>